<template>
  <div class="header-bar">
    <div class="left">
      <slot></slot>
    </div>
    <div class="mid">
      <slot name="mid"></slot>
    </div>
    <div class="right">
      <slot name="right" :img="img"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '默认title',
    },
  },
  data() {
    return {
      img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019fb456b19fb232f875520f98686a.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656120076&t=1972c7d66f1f6f692a053565b48f9547',
    }
  },
}
</script>

<style lang="scss" scoped>
.header-bar {
  display: flex;
  height: 50px;
  .left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mid {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
}
</style>
